<template>
	<view class="">
		<u-upload :fileList="fileList" :name='name' @afterRead="afterRead" @delete="deletePic" :multiple='multiple'
			:maxCount="maxNum" :uploadText='uploadText'>
		</u-upload>
	</view>

	<!-- 	使用
	<uploadImg @changeImg='changeImg' :maxNum='10' :name='index' action="/api/common/upload"
		:fileLists='fileLists'>
	</uploadImg>
	

	changeImg(e) { //上传
	// console.log(e);
	   this.code = e.code
	   this.images = e.img_str
	   
	   this.from.images = e.img_str
	   this.from.flair[e.name].image = images
	},
	
	上传提交判断
	submlie() {
		if (this.code == 100) {
			uni.$u.toast('请等待图片上传完成！')
		} else {
			uni.$u.toast('图片上传完成')
		})
	 -->
</template>

<script>
	/*
	 * @param {action,String} 上传地址
	 * @param {name,String} 上传组件标识
	 * @param {maxNum,Number} 最多几张图片
	 * @param {uploadText,String} 上传提示文字
	 * @param {multiple,bool} 是否开启多图上传
	 */
	import {
		mapGetters,
		mapState
	} from 'vuex';
	export default {
		props: {
			fileLists: {
				default: []
			},
			action: {
				default: ''
			},
			name: {
				default: 1
			},
			maxNum: {
				default: 3
			},
			uploadText: {
				default: '上传图片'
			},
			multiple: {
				default: true,
			}
		},
		components: {},
		data() {
			return {
				fileList: [], //上传图片预览图
			}
		},
		mounted() {
			this.fileList = this.fileLists
		},
		methods: {

			// 删除图片
			deletePic(event) {
				this.fileList.splice(event.index, 1)

				let img_arr = []
				this.fileList.map(item => {
					img_arr.push(item.urla)
				})
				let obj = {
					images: this.fileList,
					name: event.name,
					img_str: img_arr.toString()
				}
				this.$emit('changeImg', obj)
			},
			// 新增图片 
			async afterRead(event) {
				let lists = [].concat(event.file)
				let fileListLen = this.fileList.length

				lists.map((item) => {
					this.fileList.push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				this.$emit('changeImg', {
					code: 100
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this.fileList[fileListLen]
					if (result) {
						this.fileList.splice(fileListLen, 1, Object.assign(item, {
							status: 'success',
							message: '',
							url: result ? this.$url + result : '',
							urla: result,
						}))
					} else {
						this.fileList.splice(fileListLen, 1)
					}
					fileListLen++
				}

				let img_arr = []
				this.fileList.map(item => {
					img_arr.push(item.urla)
				})
				let obj = {
					code: 200,
					images: this.fileList,
					name: event.name,
					img_str: img_arr.toString()
				}
				this.$emit('changeImg', obj)
			},
			uploadFilePromise(url) { //上传图片
				return new Promise((resolve, reject) => {
					uni.uploadFile({
						url: this.$url + this.action, // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						header: {
							"Content-Type": "multipart/form-data",
							'token': this.token
						},
						success: (res) => {
							// console.log(res);
							setTimeout(() => {
								let resa = JSON.parse(res.data)
								// console.log(resa, 888);
								if (resa.code == 0) {
									resolve(resa.data.url)
								} else {
									uni.$u.toast(resa.msg)
									resolve('')
								}
							}, 500)
						},
						fail: (err) => {
							console.log(err);
						}
					});
				})
			},
		},
		computed: {
			...mapState({
				token: state => state.token,
			})
		},
		watch: {

		}
	}
</script>

<style lang="scss" scoped>

</style>
